<h1>Demo: Advanced Features</h1>

<ul>
    <li><strong>dnd-effect-allowed:</strong> This demo shows how to use dnd-effect-allowed to control which drop effects are allowed.
        If the source and target elements have no drop effect that is allowed on both, then a drop is not possible. If there are multiple
        possible drop effects, then the user can control the drop effect using modifier keys (Ctrl and Alt).</li>
    <li><strong>dnd-external-sources:</strong> Allows to drag and drop elements accross browser windows, which you can test in this
        example. The downside to this is that the lists will accept arbitrary text to be dropped. To prevent that, the dnd-drop callback
        verifies that the dropped element is of the desired format.</li>
    <li><strong>dnd-allowed-types in nested lists:</strong> We are using the dnd-allowed-types attribute to ensure that Containers
        only accept items, but not other containers.</li>
    <li><strong>dnd-horizontal-list:</strong> This attribute tells the positioning algorithm to drop incoming elements left or right
        of the existing elements, instead of above or below.</li>
    <li><strong>Callbacks:</strong> The directives offer various callbacks, which in this example will log the events to the console.
        Additionally, the callbacks on the dnd-list can prevent an element from being dropped. In this example <strong>you can't drop elements
        after the 10th position</strong>, because we are preventing that in the dnd-dragover callback.</li>
</ul>

<div class="advancedDemo row">
    <div ng-repeat="containers in model" class="col-md-6">
        <div class="dropzone box box-yellow" ng-include="'advanced/advanced.html'"></div>
    </div>
</div>

<div view-source="advanced"></div>

<h2>Generated Model</h2>
<pre>{{modelAsJson}}</pre>
